<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>智慧物业管理系统</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
	<style>
		.card-body {
			padding: 20px;
			background-color: #73cdee;
			border: 1px solid #e5ebf3;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
	</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
	<!-- 统计卡片 -->
	<div class="row">
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>居民总数</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" id="residentCount">--</h1>
					<div class="stat-percent font-bold text-success">
						<i class="fa fa-user"></i>
					</div>
					<small>已入住居民数量</small>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>楼宇总数</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" id="buildingCount">--</h1>
					<div class="stat-percent font-bold text-info">
						<i class="fa fa-building"></i>
					</div>
					<small>在管楼宇数量</small>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>车位使用率</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" id="parkingRate">--%</h1>
					<div class="stat-percent font-bold text-navy">
						<i class="fa fa-car"></i>
					</div>
					<small>已使用/总车位</small>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>今日访客</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" id="visitorCount">--</h1>
					<div class="stat-percent font-bold text-warning">
						<i class="fa fa-users"></i>
					</div>
					<small>今日访客登记数</small>
				</div>
			</div>
		</div>
	</div>

	<!-- 快捷操作 -->
	<!-- 快捷操作 -->
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>快捷操作</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-2">
							<div class="card-body">
								<a href="/system/resident" class="text-center" data-auto-refresh="true">
									<h2 class="font-bold no-margins">居民管理</h2>
								</a>
							</div>
						</div>
						<div class="col-sm-2">
							<div class="card-body">
								<a href="/system/building" class=" text-center">
									<h2 class="font-bold no-margins">楼宇管理</h2>
								</a>
							</div>
						</div>
						<div class="col-sm-2">
							<div class="card-body">
								<a href="/system//complaint" class=" text-center">
									<h2 class="font-bold no-margins">投诉建议</h2>
								</a>
							</div>
						</div>
						<div class="col-sm-2">
							<div class="card-body">
								<a href="/system/parking" class=" text-center">
									<h2 class="font-bold no-margins">车位管理</h2>
								</a>
							</div>
						</div>
						<div class="col-sm-2">
							<div class="card-body">
								<a href="/system/vehicle" class=" text-center">
									<h2 class="font-bold no-margins">车辆管理</h2>
								</a>
							</div>
						</div>
						<div class="col-sm-2">
							<div class="card-body">
								<a href="/system/visitor" class=" text-center">
									<h2 class="font-bold no-margins">访客管理</h2>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<!-- 最新投诉建议 -->
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>最新投诉建议</h5>
				</div>
				<div class="ibox-content">
					<div class="feed-activity-list" id="complaintList">
						<!-- 动态加载投诉建议数据 -->
					</div>
				</div>
			</div>
		</div>

		<!-- 最新访客记录 -->
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>最新访客记录</h5>
				</div>
				<div class="ibox-content">
					<div class="feed-activity-list" id="visitorList">
						<!-- 动态加载访客记录数据 -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 引入基础JS -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.9}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.7.9}"></script>
<script th:src="@{/ruoyi/index.js?v=20201208}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:src="@{/js/resize-tabs.js}"></script>
<!-- 首页数据加载JS -->
<script th:inline="javascript">
	$(function() {
		// 加载统计数据
		loadStatistics();
		// 加载投诉建议列表
		loadComplaints();
		// 加载访客记录
		loadVisitors();

		// 定时刷新数据
		setInterval(function() {
			loadStatistics();
			loadComplaints();
			loadVisitors();
		}, 300000); // 每5分钟刷新一次
	});

	// 加载统计数据
	function loadStatistics() {
		$.ajax({
			url: '/system/dashboard/statistics',
			type: 'GET',
			success: function(res) {
				if (res.code === 0) {
					$('#residentCount').text(res.data.residentCount);
					$('#buildingCount').text(res.data.buildingCount);
					$('#parkingRate').text(res.data.parkingRate + '%');
					$('#visitorCount').text(res.data.todayVisitorCount);
				}
			}
		});
	}

	// 加载最新投诉建议
	function loadComplaints() {
		$.ajax({
			url: '/system/dashboard/latest-complaints',
			type: 'GET',
			success: function(res) {
				if (res.code === 0) {
					var html = '';
					res.data.forEach(function(item) {
						html += `
                        <div class="feed-element">
                            <div class="media-body">
                                <small class="pull-right">${item.createTime}</small>
                                <strong>${item.residentName}</strong> 提交了${item.type} <br>
                                <small class="text-muted">${item.content}</small>
                            </div>
                        </div>
                    `;
					});
					$('#complaintList').html(html);
				}
			}
		});
	}

	// 加载最新访客记录
	function loadVisitors() {
		$.ajax({
			url: '/system/dashboard/latest-visitors',
			type: 'GET',
			success: function(res) {
				if (res.code === 0) {
					var html = '';
					res.data.forEach(function(item) {
						html += `
                        <div class="feed-element">
                            <div class="media-body">
                                <small class="pull-right">${item.visitTime}</small>
                                <strong>${item.visitorName}</strong> 访问 ${item.residentName} <br>
                                <small class="text-muted">预计离开时间：${item.expectedLeaveTime}</small>
                            </div>
                        </div>
                    `;
					});
					$('#visitorList').html(html);
				}
			}
		});
	}
</script>
</body>
</html>